<template>
  <div>
    <div class="header">
      <!--      顶部区域-->
      <edit-header ref="editHeaderRef" @shotCover="handleShotCover" />
    </div>
    <div class="content">
      <div class="materal-area">
        <!--        物料区-->
        <edit-materal-area />
      </div>
      <div class="preview-area">
        <!--        预览区-->
        <edit-preview-area ref="editPreviewAreaRef" />
      </div>
      <div class="attribute-area">
        <!--        属性区-->
        <edit-attribute-area />
      </div>
    </div>

    <u-popup :show="isPreview" mode="center" @close="onClickClosePreview">
      <div>
        <div class="popup-close">
          <u-icon name="close" size="25" @click="onClickClosePreview" />
        </div>
        <preview-area />
      </div>
    </u-popup>
  </div>
</template>

<script>
import editMateralArea from "./components/editMateralArea";
import editAttributeArea from "./components/editAttributeArea";
import editPreviewArea from "./components/editPreviewArea";
import previewArea from "./components/previewArea";
import editHeader from "./components/editHeader";
import { OPERATION_TYPE, PAGE_TEMPLATE } from "@/const/widget";
export default {
  components: {
    editPreviewArea,
    editAttributeArea,
    editMateralArea,
    editHeader,
    previewArea,
  },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    isPreview() {
      return this.$store.state.page.isPreview;
    },
  },
  data() {
    return {
      startEdit: false,
    };
  },
  watch: {
    pageData: {
      handler() {
        if (this.startEdit) {
          this.$store.dispatch("page/changePageModifiedStatus", true);
        }
      },
      deep: true,
    },
  },
  created() {
    this.loadData();
  },
  methods: {
    handleSetEditPage() {
      window.addEventListener("message", (event) => {
        // console.log("平台传输过来的数据", event.source);
        const { pageJson, status } = event.data;
        console.log("低代码-平台传输过来的数据", event.data);
        if (pageJson) {
          const page = JSON.parse(pageJson);
          this.$store.dispatch("page/setPageJson", page).then(() => {
            this.startEdit = true;
          }); //启动编辑
          this.$store.dispatch(
            "page/setEditConfigComActiveId",
            page.items[0]?.id
          ); //激活第一个组件
          this.$store.dispatch(
            "page/setShotCover",
            pageJson?.attribute?.shotCover || ""
          ); //输入截图
        }
        if (status) {
          this.$store.dispatch("page/setPageStatus", Number(status));
        }
      });
    },
    handleSetAddPage() {
      const { sign } = this.$route.query;
      const page = JSON.parse(JSON.stringify(PAGE_TEMPLATE));
      page.sign = sign;
      this.$store.dispatch("page/setPageJson", page);
      this.$store.dispatch("page/setEditConfigComActiveId", page.items[0]?.id);
      this.startEdit = true;
    },
    async loadData() {
      const query = this.$route.query;
      console.log("参数", query);
      if (query.op) {
        await this.$store.dispatch("page/setOperationStatus", query.op);
      }
      if (
        query &&
        query.hasOwnProperty("page_id") &&
        query.hasOwnProperty("sign") &&
        query.hasOwnProperty("op")
      ) {
        if (query.op === OPERATION_TYPE.ADD) {
          this.handleSetAddPage();
        } else if (
          query.op === OPERATION_TYPE.EDIT ||
          query.op === OPERATION_TYPE.COPY
        ) {
          this.handleSetEditPage();
        }
      } else {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: "暂无此页面，请退出重试",
        });
        // return uni.showToast({
        //   icon: "error",
        //   title: "暂无此页面，请退出重试",
        // });
      }
    },
    onClickClosePreview() {
      this.$store.dispatch("page/setPagePreview", false);
    },
    handleShotCover() {
      this.$refs.editPreviewAreaRef.handleShotPreviewCover().then(() => {
        this.$refs.editHeaderRef.handleShotCoverNextSavePage();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: center;
}
.materal-area{
  width: 192px;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}
.attribute-area {
  width: 500px;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}
.materal-area {
  border-right: 1px solid whitesmoke;
}
.attribute-area {
  border-left: 1px solid whitesmoke;
  background-color: white;
}
.preview-area {
  flex: 1;
}
.popup {
  &-close {
    background: whitesmoke;
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
